<template>
	<view class="content bg-img bg-mask " v-if="show22">
		<u-navbar title="采矿" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>

		<view class="scroll">
			<view class="flex head  f30" style="display: none;">
				<text class="f-1 flex justify-center" @click="flg(1)" :class="[{ action: show }, { color: show }]">充币</text>
				<text class="f-1 flex justify-center" @click="flg(2)" :class="[{ action: show1 }, { color: show1 }]">提币</text>
				<text class="f-1 flex justify-center" @click="flg(3)" :class="[{ action: show2 }, { color: show2 }]">转账</text>
			</view>
			<view class="padding-lr rchg " v-if="show">
				<view class="response flex justify-end " @click="rchg"><view class="rchgRec">充值记录</view></view>
				<view class="qianbao flex justify-between">
					<view class="left response" style="width: calc(100%);">
						<view class="t1">钱包地址：</view>
						<view class="f20 t2 text-cut ">{{ addr }}</view>
					</view>
					<view class="right bg-gradual-green r " style="width: 120rpx; width: 120rpx; display: none;"></view>
				</view>
				<view class="computingPower">
					<text>PE动态价格</text>
					<text>10U：1PE</text>
				</view>
				<view class="curr">
					<text>币种</text>
					<view class="inpt">
						<input type="text" value="" placeholder="选择币种" value="PE" disabled="" />

						<image src="../../static/sanjiaox.png" mode="" style="width:36rpx ; height: 20rpx;"></image>
					</view>
				</view>

				<view class="curr">
					<text>充币地址</text>
					<view class="inpt">
						<input type="text" value="" v-model="counterAddr" disabled v-if="showInput" class="text-cut" style=" width: 690rpx !important;" />
						<input type="text" value="" v-else />
						<!-- <image src="../../static/sanjiaox.png" mode="" style="width:36rpx ; height: 20rpx;"></image> -->
					</view>
					
				</view>

				<view class="singleChoice">
					<u-radio-group v-model="value" @change="radioGroupChange" active-color="#04BD9E" class="response">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">{{ item.name }}</u-radio>
					</u-radio-group>
				</view>

				<view class="curr" style="margin-top: 10rpx;">
					<text>充币数量</text>
					<view class="inpt">
						<input type="number" value="" v-model="pe" placeholder="输入充币数量" />
						<!-- <image src="../../static/sanjiaox.png" mode="" style="width:36rpx ; height: 20rpx;"></image> -->
					</view>
				</view>
				<view class="btn" @click="aacc">确认充币</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pe: '',
			showInput: true,
			addr: '',
			show: true,
			show1: false,
			show2: false,
			show22:true,
			CustomBar: this.CustomBar,
			list: [
				{
					name: '为本地址充币',
					disabled: false,
				},
				{
					name: '为其他地址充币',
					disabled: false,
				},
			],

			value: '为本地址充币',
			openAddress: '',
			counterAddr: '',
		};
	},
	onLoad(e) {
		
		
		
		
		
		
		
		
		
		if (window.tronWeb) {
			//imtoken钱包
			this.getAddr();
			this.rmngPeCoins();
		} else {
			this.show22 = false;
			uni.$showMsg('非TOKEN钱包DAPP无法上链', 3000);
		}







		this.openAddress = e.openAddress;

		this.counterAddr = uni.getStorageSync('uid');
	},
	methods: {
		rchg() {
			uni.navigateTo({
				url: 'tongdui?addr=' + this.addr,
			});
		},
		ret() {
			uni.navigateBack({
				delta: 1,
			});
		},
		async getAddr() {
			let obj = {
				// uid: uni.getStorageSync("uid"),
			};

			const res = await this.$u.post('/index.php/api/pe/buyPe', obj, { token: uni.getStorageSync('token') });

			this.addr = res.data;
			console.log('res >>  ', res);
		},

		radioGroupChange(e) {
			console.log('e :>> ', e);
			e == '为本地址充币' ? (this.showInput = true) : (this.showInput = false);
		},

		async aacc() {
			if (!this.pe) return uni.$showMsg('请输入充币数量!');
			var pe = this.pe + '000000';

			var obj = setInterval(async () => {
				if (window.tronWeb && window.tronWeb.defaultAddress.base58) {
					clearInterval(obj);
					var tronweb = window.tronWeb;
					var tx = '';
					const trc20ContractAddress = this.openAddress; //contract address
					try {
						let contract = await tronWeb.contract().at('TRovDNsLBc4nSrAkHP1LZngsZ3899cu82c');

						let result = await contract
							.transfer(
								this.addr, //address _to
								pe, //amount
							)
							.send({
								feeLimit: 10000000,
							})
							.then(output => {
								console.log('- Output:', output, '\n');
								tx = output;
								this.confirm(output);
							});
						console.log('result: ', result);
					} catch (error) {
						console.error('trigger smart contract error', error);
						uni.$showMsg('通兑失败,请重新通兑!');
					}

					// var signedTx = await tronweb.trx.sign(tx)
					// var broastTx = await tronweb.trx.sendRawTransaction(signedTx)
					// console.log(broastTx)
				}
			}, 10);

			JSON.stringify();
		},

		async confirm(output) {
			uni.$showLoading();
			let obj = {
				pe: this.pe,
				txid: output,
				pe: this.pe,
				from: uni.getStorageSync('uid'),
				to: this.addr,
			};
			const res = await this.$u.post('/index.php/api/pe/order', obj, { token: uni.getStorageSync('token') });
			setTimeout(() => {
				this.pe = '';
				uni.$showMsg(res.msg);
				uni.hideLoading();
			}, 500);
		},
		flg(e) {
			console.log('e :>> ', e);
			if (e == 1) {
				this.show = true;
				this.show1 = false;
				this.show2 = false;
			}
			if (e == 2) {
				this.show = false;
				this.show1 = true;
				this.show2 = false;
			}
			if (e == 3) {
				this.show = false;
				this.show1 = false;
				this.show2 = true;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-image: url(../../static/gern.png);
	input {
		color: #ffffff;
	}
	/deep/.uni-input-input {
		width: 100vw;
	}
	.henxian {
		border-bottom: 2rpx solid #4d4d4d;
	}
	/deep/ .u-radio-group {
		width: 100% !important;
		display: flex !important;
		justify-content: space-between !important;
	}
	.scroll {
		height: calc(100vh - 80rpx);
		overflow: scroll;
		.head {
			position: relative;

			color: #f0f0f0;
			width: 702rpx;
			height: 78rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;

			.color {
				color: #04bd9e;
			}
			.action::after {
				content: '';
				position: absolute;
				border-radius: 10%;

				bottom: 0;
				width: 80rpx;
				height: 4rpx;
				background: #04bd9e;
			}
		}
		.rchg {
			.rchgRec {
				display: flex;
				align-items: center;
				justify-content: center;

				width: 140rpx;
				height: 46rpx;
				border: 1rpx solid #999999;
				border-radius: 23rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #e6e6e6;
				margin-top: 45rpx;
			}

			.qianbao {
				height: 120rpx;
				margin-top: 40rpx;
				.left {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.t1 {
						font-size: 38rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #b3b3b3;
					}
					.t2 {
						margin-top: 20rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #f0f0f0;
					}
				}
				.left {
				}
			}
			.computingPower {
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				margin: 0 auto;
				margin-top: 55rpx;
				width: 702rpx;
				height: 145rpx;
				background: #0e1010;
				opacity: 0.7;
				border-radius: 20rpx;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #04bd9e;
				}
			}
			.curr {
				margin-top: 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 148rpx;
				border-bottom: 2rpx solid #3c3c3c;
				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.inpt {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
			.singleChoice {
				height: 70rpx;
				display: flex;
				align-items: center;
			}
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto;
				margin-top: 50rpx;
				width: 452rpx;
				height: 69rpx;
				background: #04bd9e;
				border-radius: 35rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
}
</style>
